<template>
  <div class="invitation">
    <van-nav-bar
      :title="$t('invitation.titlehead')"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="auto">
      <div class="invitation-body">
        <div class="body-title">{{ $t("invitation.invitation") }}</div>
        <div class="body-code">{{ $t("invitation.myCard") }}:{{ code }}</div>
        <div class="coppy" @click="onCopy">{{ $t("invitation.coppy") }}</div>
        <div class="invitation-list">
          <div class="reward">{{ $t("invitation.reward") }}</div>
          <div class="amount">
            <div class="amount-all">
              <div class="amount-all-title">{{ $t("invitation.amount") }}</div>
              <div class="amount-all-num">
                {{ $t("moneyIcon") }}{{ data.totalAwardAmount }}
              </div>
            </div>
            <div class="amount-line" />
            <div class="amount-all">
              <div class="amount-all-title">
                {{ $t("invitation.available") }}
              </div>
              <div class="amount-all-num text-prim">
                {{ $t("moneyIcon") }}{{ data.totalAmountAvailable }}
              </div>
            </div>
          </div>
          <div class="my-invitaion">{{ $t("invitation.titlehead") }}</div>
          <div class="body-num">
            <div class="body-num-total">
              {{ $t("invitation.total") }} : {{ data.totalTrade }}
            </div>
            <div class="body-num-total">
              {{ $t("invitation.num") }}: {{ data.totalInviteNumber }}
            </div>
          </div>
          <div class="body-list">
            <div class="table-body">
              <div class="body-list-title body-fir">
                {{ $t("invitation.success") }}
              </div>
              <div class="body-list-title body-sec">
                {{ $t("invitation.day") }}
              </div>
              <div class="body-list-title body-thir">
                {{ $t("invitation.deal") }}
              </div>
            </div>
            <div>
              <div
                v-for="(item, index) of list"
                :key="'date' + index"
                class="table-label table-body"
              >
                <div class="body-fir">
                  {{ point.numberEmail(item.nickName) }}
                </div>
                <div class="body-sec">{{ item.date }}</div>
                <div class="body-thir">
                  {{
                    item.isDeal == 1
                      ? $t("invitation.yes")
                      : item.isDeal == 0
                      ? $t("invitation.no")
                      : item.isDeal
                  }}
                </div>
              </div>
              <img
                v-if="list.length == 0"
                src="@/assets/images/person/nodata.png"
                alt=""
                class="no-data"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-dialog :show="show" class="modal">
      <template #title>
        <div class="modal-title">
          {{ $t("invitation.ruleTitle") }}
        </div>
      </template>
      <div class="modal-body">
        <div>1、{{ $t("invitation.one") }}</div>
        <div>2、{{ $t("invitation.two") }}</div>
      </div>
      <template #footer>
        <div class="modal-foot">
          <div>
            <van-button class="modal-conact" @click="show = false">{{
              $t("invitation.knowBtn")
            }}</van-button>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { Toast } from "vant";
import { getStatistics, getInviteUser } from "@/api/user";
import { onMounted } from "vue";
import usePoint from "@/hooks/usePoint.js";
const point = usePoint();
const { t } = useI18n();
const show = ref(true);
const list = reactive([]);
const data = reactive({});
let code = ref("");
onMounted(async () => {
  let res = await getStatistics();
  let user = await getInviteUser();
  console.log(user);
  console.log(res);
  Object.assign(list, user.data);
  Object.assign(data, res.data);
  console.log(point.userInfo.inviteCode);
  code.value = point.userInfo.inviteCode;
});
function onClickLeft() {
  history.back();
}
function onCopy() {
  console.log("复制");
  let href = window.location.href.split("#");
  var cInput = document.createElement("input");
  cInput.value = href[0] + "#/register?code=" + code.value;
  document.body.appendChild(cInput);
  cInput.select(); // 选取文本框内容
  document.execCommand("copy");
  Toast(t('pcPerson.copySuccess'));
  // 复制成功后再将构造的标签 移除
  document.body.removeChild(cInput);
}
</script>

<style lang="less" scoped>
.invitation {
  background: #ff1fd9;
  height: 100%;
  .auto {
    height: calc(100vh - 60px);
    overflow: auto;
  }
  .no-data {
    margin-top: 11px;
    min-width: 120px;
    max-width: calc(100vw - 250px);
    // height: 134px;
  }
  &-body {
    width: 100vw;
    height: 897px;
    background: url(@/assets/images/person/invitation-bg.png);
    background-size: cover;
    text-align: center;
    position: relative;
    .coppy {
      text-align: center;
      position: absolute;
      left: calc(50vw - 85px);
      top: 335px;
      width: 163px;
      height: 27px;
      background: #fbbb2f;
      box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.25);
      border-radius: 13px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 23px;
    }
    .body-code {
      text-align: center;
      position: absolute;
      top: 310px;
      left: calc(50vw - 82px);
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 16px;
    }
    .body-title {
      position: absolute;
      top: 61px;
      left: calc(50vw - 82px);
      width: 173px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 30px;
    }
    .invitation-list {
      width: calc(100% - 80px);
      padding-left: 39px;
      padding-right: 40px;
      position: absolute;
      top: 391px;
      .reward {
        font-size: 16px;
        font-weight: bold;
        color: #636363;
        line-height: 16px;
      }
      .amount {
        padding: 15px;
        margin-top: 15px;
        width: 296px;
        background: #ffdef9;
        box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.25);
        border-radius: 13px;
        display: flex;
        &-all {
          text-align: left;
          &-title {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #636363;
            line-height: 12px;
          }
          &-num {
            margin-top: 9px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #636363;
            line-height: 20px;
          }
        }
        .text-prim {
          color: var(--van-primary-color);
        }
        &-line {
          width: 1px;
          height: 30px;
          background: #000000;
          margin-left: 20px;
          margin-right: 20px;
          position: relative;
          top: 5px;
        }
      }
      .my-invitaion {
        text-align: left;
        margin-top: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #636363;
        line-height: 16px;
      }
      .body-num {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        margin-bottom: 8px;
        &-total {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #636363;
          line-height: 12px;
        }
      }
    }
    .body-list {
      padding: 10px 16px;
      background: #ffdef9;
      box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      max-height: 135px;
      overflow: auto;
      .table-body {
        display: flex;
        justify-content: space-around;
      }
      &-title {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #636363;
        line-height: 11px;
      }
    }
    .body-sec {
      width: 110px;
    }
    .body-thir {
      width: 60px;
    }
    .body-fir {
      // flex: 1;
      width: calc(100% - 180px);
      word-break: break-all;
    }
    .table-label {
      font-size: 8px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #636363;
      line-height: 1.2;
      margin-top: 10px;
    }
  }
  .modal {
    text-align: center;
    &-title {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 15px;
    }
    &-body {
      font-weight: 400;
      color: #000000;
      line-height: 20px;
      padding: 12px 17px;
      font-size: 11px;
      font-family: PingFang SC;
      line-height: 17px;
    }
    &-konw {
      display: inline-block;
      width: 92px;
      height: 22px;
      background: #444444;
      border-radius: 9px;
      line-height: 12px;
      font-size: 11px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 22px;
    }
    &-conact {
      height: 30px;
      background: #ed008c;
      border-radius: 3px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 15px;
      float: right;
    }
    &-foot {
      height: 30px;
      padding-bottom: 17px;
      padding-right: 17px;
    }
  }
}
</style>
